﻿<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>我的订单</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- style CSS
    ============================================ -->
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="lib/custom-slider/css/nivo-slider.css"/>
    <link rel="stylesheet" href="lib/custom-slider/css/preview.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/owl.carousel.css"/>
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link rel="stylesheet" href="css/meanmenu.min.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/responsive.css"/>
    <!-- modernizr JS
    ============================================ -->
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <style>
        span.real-amount{
            font-size: 30px;
            font-weight: 700;
            color: red;
        }
    </style>
</head>
<body>
<!-- header start -->
<header class="header-area">
    <!--<header class="header-area">-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                <div class="header-logo">
                    <a href="user_index.html"><img src="img/logo/header-logo.png" alt="Jhilmil"></a>
                </div>
            </div>
            <div class="col-md-10">
                <div class="row">
                    <div class="col-lg-5 col-md-4 col-sm-3 hidden-xs">
                        <div class="top-left">

                        </div>
                    </div>
                    <div class="col-lg-7 col-md-8 col-sm-9">
                        <div class="top-right">
                            <div class="top-login-cart">
                                <ul id="nav-header">
                                    <li class="hidden-xs">
                                        <a href="user_loginUI.html">登陆/注册</a>
                                    </li>
                                    <li class="hidden-xs welcome">
                                        <a href="#" class="user"></a>
                                    </li>
                                    <li class="welcome">
                                        <a href="javascript:void(0);" class="log-out">退出登录</a>
                                    </li>
                                    <li class="cart">
                                        <a href="javascript:void(0);" class="to-cart">
                                            <img src="img/icon/cart.png" alt="">购物车 (
                                            <span id="product_count"></span>&nbsp;)
                                        </a>
                                        <ul class="submenu-mainmenu mycart" style="display: none">
                                            <li id="check-box">
                                                        <span class="sub-total-cart text-center" style="display: inline-block;">
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                &nbsp;&nbsp;小计&nbsp;&nbsp;&nbsp;
                                                            <span id="amount">￥620</span>
                                                            <a href="javascript:void(0);" class="view-cart active"></a>
                                                            <a href="javascript:void(0);" class="view-cart"></a>
                                                        </span>
                                            </li>
                                        </ul>
                                        <ul class="submenu-mainmenu" style="text-align: center">
                                            <li>
                                                <span style="color: orange">登录后可查看购物车</span>
                                                <a href="user_loginUI.html">点此登录</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <div class="search-box">
                                <form>
                                    <input type="text" placeholder="输入关键字查找" style="padding-bottom: 0px;">
                                    <button type="button" class="search-pro"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-9 col-md-8">
                        <div class="mainmenu-area">
                            <nav>
                                <div class="mainmenu">
                                    <ul>
                                        <li><a href="user_index.html">主页</a></li>
                                        <li><a href="user_shop.html">商店</a></li>
                                        <li><a href="user_product_details.html">商品详情</a></li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4">
                        <div class="account-usd">
                            <ul>
                                <li class="language"><a href="javascript:void(0);">我的账户<i class="fa fa-angle-down"></i></a>
                                    <ul class="submenu-mainmenu">
                                        <li><a href="javascript:void(0);" class="my-order"><i class="fa fa-circle"></i>我的订单</a></li>
                                        <li><a href="javascript:void(0);" class="my-like"><i class="fa fa-circle"></i>我的收藏</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mobile Menu Area start -->
    <div class="mobile-menu-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="mobile-menu">
                        <nav id="dropdown">
                            <ul>
                                <li><a href="user_index.html">主页</a></li>
                                <li><a href="user_shop.html">商店</a></li>
                                <li><a href="user_product_details.html">商品详情</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Mobile Menu Area end -->
    <!--</header>-->
</header>
<!-- header end -->

<div class="create">
    <div class="content">
        <div class="container-fluid">
            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            生成订单
                        </div>

                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group mb-3">
                                        <label for="productName" class="form-control-label">商品名称: </label>
                                        <input type="text" class="form-control" id="productName" disabled>
                                        <input type="hidden" class="form-control" id="carId">
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="productPrice" class="form-control-label">商品单价: </label>
                                        <input type="text" class="form-control" id="productPrice" disabled>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label">商品图片: </label>
                                        <img id="show-del" style="height: 120px;" width="180px" />
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="carCount" class="form-control-label">购买数量: </label>
                                        <input type="text" class="form-control" id="carCount" disabled>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="real_pay" class="form-control-label">实付价格: </label>
                                        <input type="text" class="form-control" id="real_pay" disabled>
                                    </div>

                                    <div class="mb-3">
                                        <div class="form-group">
                                            <label for="productInfoIntroduction" class="form-control-label">商品描述: </label>
                                            <div class="form-control-plaintext" id="productInfoIntroduction">

                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-8">
                                    <div class="form-group mb-3">
                                        <label for="addr" class="form-control-label require">收件地址: </label>
                                        <input type="text" class="form-control" id="addr" required>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="name" class="form-control-label require">收件人姓名: </label>
                                        <input type="text" class="form-control" id="name" required>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label for="phone" class="form-control-label require">收件人电话: </label>
                                        <input type="text" class="form-control" id="phone" required>
                                    </div>

                                    <div class="form-group mb-3">
                                        <label class="form-control-label"></label>
                                        <p class="form-control-plaintext"><strong>实付款：</strong><span class="real-amount"></span></p>
                                        <p class="form-control-plaintext"><strong>寄送至：</strong><span class="to-addr"></span></p>
                                        <p class="form-control-plaintext"><strong>收货人：</strong><span class="to-people"></span></p>
                                    </div>

                                    <button type="button" class="btn btn-outline-warning submit">提交订单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- footer start -->
<footer class="footer-area">
    <!--<footer class="footer-area">-->
    <div class="footer-top-area">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-4 col-xs-12">
                </div>
            </div>
        </div>
    </div>
    <div class="footer-middle-area">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="footer-widget">
                        <h5>联系方式</h5>
                        <div class="single-footer-contact">
                            <div class="footer-icon">
                                <img src="img/cart/1.png" alt="">
                            </div>
                            <div class="footer-contact-info">
                                <p>8901 Marmora Raod, </p>
                                <p>Glasgow, D04  89GR</p>
                            </div>
                        </div>
                        <div class="single-footer-contact">
                            <div class="footer-icon">
                                <img src="img/cart/2.png" alt="">
                            </div>
                            <div class="footer-contact-info">
                                <p>电话 : (801) 4256  9856</p>
                                <p>电话 : (801) 4256  9658</p>
                            </div>
                        </div>
                        <div class="single-footer-contact">
                            <div class="footer-icon">
                                <img src="img/cart/3.png" alt="">
                            </div>
                            <div class="footer-contact-info">
                                <p>电子邮件 : <a href="#">admin@devitems.com</a></p>
                                <p>网址 : <a href="http://devitems.com/">www.devitems.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-3">
                    <div class="footer-widget">
                        <h5>Company</h5>
                        <ul>
                            <li><i class="fa fa-circle"></i><a href="user_index.html">主页</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">关于我们</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">联系我们</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">支持中心</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 hidden-sm">
                    <div class="footer-widget">
                        <h5>支持</h5>
                        <ul>
                            <li><i class="fa fa-circle"></i><a href="#">配送信息</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">订单跟踪</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">退货</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">礼物卡</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">送货上门</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">在线支持</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-2 col-sm-3">
                    <div class="footer-widget">
                        <h5>信息</h5>
                        <ul>
                            <li><i class="fa fa-circle"></i><a href="#">付款方式</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">运输</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">查看</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">折扣</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">网站地图</a></li>
                            <li><i class="fa fa-circle"></i><a href="#">服务</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom-area">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6">
                    <div class="copyright">
                        <p>Copyright &copy; 2019.Company name All rights reserved</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="footer-menu text-center">
                        <nav>
                            <ul>
                                <li><a href="#">网站地图</a></li>
                                <li><a href="#">联系我们</a></li>
                                <li><a href="#">愿望清单</a></li>
                                <li><a href="#">通讯</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <div class="col-md-4 hidden-sm">
                    <div class="payment text-right">
                        <img src="img/payment/1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--</footer>-->
</footer>
<!-- footer end -->


<!-- jquery
============================================ -->
<script src="js/vendor/jquery-1.11.3.min.js"></script>
<!-- bootstrap JS
============================================ -->
<script src="js/bootstrap.min.js"></script>
<!-- meanmenu JS
============================================ -->
<script src="js/jquery.meanmenu.js"></script>
<!-- wow JS
============================================ -->
<script src="js/wow.min.js"></script>
<!-- owl.carousel JS
============================================ -->
<script src="js/owl.carousel.min.js"></script>
<!-- countdown JS
============================================ -->
<script src="js/jquery.countdown.min.js"></script>
<!-- price-slider JS
============================================ -->
<script src="js/jquery-price-slider.js"></script>
<!-- scrollUp JS
============================================ -->
<script src="js/jquery.scrollUp.min.js"></script>
<!-- plugins JS
============================================ -->
<script src="js/plugins.js"></script>
<!-- Nevo Slider js
============================================ -->
<script type="text/javascript" src="lib/custom-slider/js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="lib/custom-slider/home.js"></script>
<!-- main JS
============================================ -->
<script src="js/main.js"></script>
<script src="js/myfun.js" type="text/javascript"></script>
<script>
    //跳转到购物车
    $(function () {
        $("a.to-cart").click(function () {
            $.ajax({
                url: url + "cart/cartUI",
                type: "POST",
                success: function (data) {
                    if (data["code"] == 200){
                        window.location.href=url + "user/" + data["data"]+".html";
                    }
                }
            });
        });

        $("a.to-cart").hover(function () {
            $(".header-area .top-right .cart .mycart .single-cart-item").remove();
            $.ajax({
                url: url + "cart/getCartList",
                type: "POST",
                data: {userName:getCookie("USER_NAME")},
                success: function (data) {
                    if (data["code"] == 200){
                        var datum = data["data"];
                        var sum = 0;
                        for (let i = 0; i < datum.length; i++) {
                            var product = datum[i]["product"];
                            $(".header-area .top-right .cart .mycart #check-box").before(
                                "<li class=\"single-cart-item clearfix\">\n" +
                                "    <span class=\"cart-img\">\n" +
                                "        <a href=\"javascript:void(0);\" class='show-info' data-target='" + product["productId"] + "'><img src=\"" + product["productPicture"] + "\" alt=\"\" width=\"50\"></a>\n" +
                                "    </span>\n" +
                                "    <span class=\"cart-info\">\n" +
                                "        <a href=\"javascript:void(0);\" class='show-info' data-target='\" + product[\"productId\"] + \"'>" + product["productName"] + "</a>\n" +
                                "        <span>￥<span>" + product["productPrice"] + "</span> x <span>" + datum[i]["carCount"] + "</span></span>\n" +
                                "    </span>\n" +
                                "</li>"
                            );

                            sum += product["productPrice"] * datum[i]["carCount"];
                        }
                        $(".cart #product_count").html(datum.length);
                        $(".cart #amount").html("￥" + sum.toFixed(2));
                    }
                }
            });
        });
    });

    //登录成功显示姓名和购物车，否则不显示
    $(function () {
        var cookie = document.cookie;
        var strings = cookie.replace("; ","=").split("=");
        var username;
        if (strings.indexOf("USER_NAME") != -1) {
            username = strings[strings.indexOf("USER_NAME") + 1];
        }
        if (username != null && username != '') {
            let $nav = $("#nav-header");
            $nav.find("li").removeClass("welcome");
            $nav.find(".hidden-xs").first().attr("class", "hidden-xs welcome");
            $nav.find(".user").html("欢迎 ：<a href='#'>" + username + "</a>!");
            let cart_li = $nav.find(".cart");
            cart_li.find(".mycart").css("display", "block");
            cart_li.find("ul").last().css("display", "none");
        }
    });

    //生成订单页面详情
    $(function () {
        if (isNaN(parseInt(getCookie("CARTID")))){
            window.location.href=url + "user/user_loginUI.html";
        }

        var cartId = parseInt(getCookie("CARTID"));

        $.ajax({
            url: url + "order/getOrder",
            type: "POST",
            data: {cartId: cartId},
            success: function (data) {
                if (data["code"] == 200) {
                    var $productName = $("#productName");
                    var $carId = $("#carId");
                    var $productPrice = $("#productPrice");
                    var $productInfoIntroduction = $("#productInfoIntroduction");
                    var $img = $("#show-del");
                    var $realPay = $("#real_pay");
                    var $real = $("span.real-amount");
                    var $carCount = $("#carCount");

                    var cart = data["data"];
                    var product = cart["productPo"];

                    var real = parseFloat(product["productPrice"]) * parseInt(cart["carCount"]);
                    real = real.toFixed(2);

                    $productName.val(product["productName"]);
                    $carId.val(cart["carId"]);
                    $productPrice.val(product["productPrice"]);
                    $productInfoIntroduction.html(product["productInfoIntroduction"]);
                    $img.attr("src",product["productPicture"]);
                    $realPay.val(real);
                    $real.text("￥" + real);
                    $carCount.val(cart["carCount"])
                }
            }
        });
    });

    //生成订单
    $(".create .card-body .submit").click(function () {
        var order = {};
        var $carId = $("#carId");
        var $addr = $("#addr");
        var $phone = $("#phone");
        var $name = $("#name");
        order["addr"] = $addr.val();
        order["phone"] = $phone.val();
        order["name"] = $name.val();
        $.ajax({
            url: url + "order/createOrder",
            type: "POST",
            contentType:"application/json;charset=UTF-8",
            dataType:"json",
            processData : false,
            data: JSON.stringify({
                "order": order,
                "carId": $carId.val(),
                "userName": getCookie("USER_NAME"),
            }),
            success:function (data) {
                if (data["code"] == 200) {
                    window.location.href=url + "user/pay.html";
                }
            }
        });
    });

    $("#addr").change(function () {
        $(".to-addr").text($(this).val());
    });
    $("#name").change(function () {
        $(".to-people").text($(this).val() + " " + $("#phone").val());
    });
    $("#phone").change(function () {
        $(".to-people").text($("#name").val() + " " + $(this).val());
    })
</script>
</body>
</html>

